<template>
  <div>
    <div class="content" id="footer-over" style="background-color:#fff;color:#black;">
    <h3>精彩推荐</h3>
    <div>
      <router-link to="#">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators='false' >
        <van-swipe-item v-for="(item,index) in areanews" :key="index"><img :src="/pic&video/+item.pic" alt="" style="width:100%;height:193px"><p style="color:black">{{item.title}}</p></van-swipe-item>
      </van-swipe>
      </router-link>
      
    </div>
    
    <div class="example-3d">
       <h4 style="margin:10px">精彩视频</h4>
      <router-link to="#">
      <swiper class="swiper" :options="swiperOption">
       <swiper-slide v-for="(item,index) in areavideo" :key="index">
         <img :src="/pic&video/+item.pic" alt="" style="width:100%;"><p style="color:black">{{item.title}}</p></swiper-slide>
     </swiper>
      </router-link>
    </div>
    
    <div class="example-3d">
      <h4>冬奥百科</h4>
      <router-link to="#">
      <swiper class="swiper" :options="swiperOption" style="background-color:#f5f7f7">
        <swiper-slide v-for="(item,index) in historyknow" :key="index"><img :src="/pic&video/+item.pic" alt="" style="width:100%;height:250px"><p style="color:black">{{item.year}}:{{item.city}}</p></swiper-slide>
     </swiper>
      </router-link>
    </div>
    <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

// 
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
    return {
      // 赛区新闻内容获取
      areanews:[], //保存当前新闻列表

      // 精彩视频内容获取
      areavideo:null,  //保存当前视频列表

      // 冬奥百科内容获取
      historyknow:[],

      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true
          },
      pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
  methods: {
    // 赛区新闻
    AreaNews(){
      this.axios.get('/areanew').then(res=>{
        console.log(res);
        this.areanews=res.data.results
      })
    },
    //精彩视频
    AreaVideo(){
      this.axios.get('/areavideo').then(res=>{
        console.log(res);
        this.areavideo=res.data.results
      })
    },

    // 冬奥百科
    HistoryKnow(){
      this.axios.get('/know').then(res=>{
        console.log(res);
        this.historyknow=res.data.results
      })
    }

  },
  mounted () {
     this.AreaNews();
     this.AreaVideo();
    this.HistoryKnow();
  },
}
</script>

<style  scoped>
  .example-3d {
    width: 100%;
    height: 300px;
    padding-top: 10px;
    padding-bottom: 50px;
    color: black;
    border-radius:0 0 30px 30px
   }
    .example-3d h4{
      margin: 10px;
    }
   .swiper-slide {
     justify-content: center;
      align-items: center;
      width: 95%;
      height: 300px;
      border-radius: 30px;
      text-align: center;
      font-weight: bold;
      background-position: center;
    }
    .swiper-slide >img{
      border-radius: 30px 30px 0 0;
    }
    #footer-over {
    position: relative;
    height:1200px;
    width: 100%;
    background: #f7f7f7;
    margin-top: 600px;
    z-index: 10;
    border-radius: 20px 20px 0 0;
    text-align: center;
    }
    
</style>